import type { IconId } from '../../../lib/icons/types/interfaces'
import { ThemeVarService } from '../../../lib/abstract/style/theme_var/service'

/**
 * 基础图标样式配置
 */
export interface IconStyleOptions {
  display?: string
  size?: number
  marginRight?: number
  backgroundImageId?: IconId
}

/**
 * 遮罩图标完整样式配置
 */
export interface IconMaskStyleOptions {
  display?: string
  size?: number
  marginRight?: number
  backgroundImageId?: IconId
  color?: string
}

/**
 * 遮罩属性配置
 */
export interface IconMaskProperties {
  iconId?: IconId
  color?: string
}

/**
 * 列表标记配置
 */
export interface ListMarkerOptions {
  paddingLeft?: string
  symbol?: string
  color?: string
}

export type InlinePseudoIconOptions = IconStyleOptions
export type InlinePseudoFullMaskOptions = IconMaskStyleOptions
export type InlinePseudoMaskConfig = IconMaskProperties
export type InlinePseudoMarkerOptions = ListMarkerOptions
/**
 * 内联伪元素样式服务类
 */
export class InlinePseudoStylesService {
  private static instance: InlinePseudoStylesService
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()

  static getInstance(): InlinePseudoStylesService {
    if (!InlinePseudoStylesService.instance) {
      InlinePseudoStylesService.instance = new InlinePseudoStylesService()
    }

    return InlinePseudoStylesService.instance
  }

  icon(options: InlinePseudoIconOptions = {}): string {
    const { display = 'inline-block', size = 16, marginRight = 6, backgroundImageId = '' } = options

    return `
content: '';
display: ${display};
width: ${size}px;
height: ${size}px;
margin-right: ${marginRight}px;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none; /* 穿透点击事件 */
flex-shrink: 0; /* 禁止图标缩小 */
vertical-align: middle;
${backgroundImageId ? `background-image: var(${this.themeVarService.generateIcon(backgroundImageId)})` : ''} !important;
`
  }

  iconMask(options: InlinePseudoFullMaskOptions = {}): string {
    const { display = 'inline-block', size = 16, marginRight = 6, backgroundImageId = '', color = 'currentColor' } = options
    const iconUrl = backgroundImageId ? this.themeVarService.generateIcon(backgroundImageId) : ''

    return `
content: '';
display: ${display};
width: ${size}px;
height: ${size}px;
margin-right: ${marginRight}px;
background-color: ${color} !important;
${iconUrl ? `mask-image: var(${iconUrl}) !important;` : ''}
mask-repeat: no-repeat !important;
mask-position: center !important;
mask-size: contain !important;
${iconUrl ? `-webkit-mask-image: var(${iconUrl}) !important;` : ''}
-webkit-mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
-webkit-mask-size: contain !important;
background-image: none !important;
pointer-events: none;
flex-shrink: 0;
vertical-align: middle;
`
  }

  setIconMask(options: InlinePseudoMaskConfig = {}): string {
    const { iconId = '', color = 'currentColor' } = options

    const iconUrl = iconId ? this.themeVarService.generateIcon(iconId) : ''

    return `
    ${iconUrl
      ? `
      mask-image: var(${iconUrl}) !important;
      -webkit-mask-image: var(${iconUrl}) !important;`
      : ''}
    background-color: ${color} !important;
    `
  }

  listMarker(options: InlinePseudoMarkerOptions = {}): string {
    const { paddingLeft = '28px', symbol = '•', color = `var(${this.themeVarService.default.base.primary})` } = options

    return `
padding-left: ${paddingLeft} !important;
position: relative !important;
list-style: none !important;

&::before {
  content: '${symbol}';
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: ${color} !important;
  font-size: 1em !important;
}
  `
  }
}
